<template>
	<view class="star-ask relative">
		<u-navbar :placeholder="true" leftIconColor="#737979" bgColor="#f2f8f8" title="星空问答"
			titleStyle="font-weight: 700;">
			<view class="u-nav-slot both-center" slot="left" @click="back()">
				<view class="cancel">
					<u-icon name="arrow-left" color="#737979" size="20"></u-icon>
				</view>
			</view>
		</u-navbar>
		<view class="tab-box">
			<u-sticky>
				<view class="tab">
					<u-tabs :list="list1" :scrollable="false" lineColor="transparent" :activeStyle="active"
						:current="current"
						itemStyle=" margin: 0;font-size:12px;border-radius: 1vw; font-weight: 700; padding: 1vw 1vw; background: tansparent; overflow: hidden;"
						@change="tabchange">
					</u-tabs>
				</view>
			</u-sticky>
			<view class="">
				<swiper :current="swiperCurrent" @change="transition" class="swipeHeiht">
					<swiper-item class="swiper-item mwidth" v-for="(item, index) in newslist" :key="index">
						<scroll-view scroll-y style="height:100%;width: 100%;" @scrolltolower="">
							<view class="ask">
								<Ques label="更高的工资和更有前景的学习机会，应该选择哪个呢?" label1="以及，我作为知识星球现有用户，应该怎样使用这款产品？"
									@send="link()" />
								<block v-if="problemlist.length==0">
									<u-empty mode="list" icon="https://cdn.uviewui.com/uview/empty/list.png">
									</u-empty>
								</block>
								<block v-for="(item1,index1) in problemlist" :key="index1">
									<Prob :prob="item1" />
								</block>
							</view>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="ask-ques" @click="go()" v-if="hasLogin">
			提问
		</view>
	</view>
</template>

<script>
	import Ques from '@/components/question/question.vue'
	import Prob from '@/components/problem/problem.vue'
	import {
		mapState,
	} from 'vuex'
	export default {
		components: {
			Ques,
			Prob
		},
		computed: {
			...mapState(['hasLogin'])
		},
		data() {
			return {
				swiperCurrent: 0,
				current: 0,
				active: {
					display: 'block',
					fontWeight: 'bold',
					transform: 'scale(1.05)',
					background: '#fff',
					borderRadius: '2vw',
					fontSize: '14px',
					padding: '3% 35%',
					whiteSpace: 'nowrap'
				},
				newslist: [{
					name: 'xx'
				}, {
					name: 'yy'
				}, ],
				list1: [{
					name: '首页'
				}, {
					name: '问题广场'
				}],
				problemlist: [{
					title: '知识星球为什么要做星空问答？',
					name: 'wulujia',
					cue: '@星球创业笔记',
					content: "山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？"
				}, {
					title: '我想问问①怎么有富人思维，富人心态；如何管理金钱→让钱生钱②普通人巴拉巴拉巴拉巴拉巴拉巴拉吧。。。',
					name: '证券周经理',
					cue: '',
					content: "山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？"
				}, {
					title: '知识星球为什么要做星空问答？',
					name: 'wulujia',
					cue: '@星球创业笔记',
					content: "山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？"
				}, {
					title: '知识星球为什么要做星空问答？',
					name: 'wulujia',
					cue: '@星球创业笔记',
					content: "山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？"
				}],

			}
		},
		methods: {
			back() {
				uni.switchTab({
					url: '../discover/discover'
				})
			},
			go() {
				uni.showToast({
					title: "好累"
				})
			},
			link() {
				uni.navigateTo({
					url: '../askDetail/askDetail'
				})
			},
			tabchange(e) {
				// console.log(e);
				this.swiperCurrent = e.index;
			},
			//滑动swiper后的下标  绑定给tab栏index		
			transition(e) {
				// console.log(e);
				this.current = e.detail.current
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f2f8f8;
		padding-bottom: 46px;
		// border-bottom: 1px solid #000;
	}

	.u-navbar,
	.u-sticky {
		z-index: 99;
	}

	.swipeHeiht {
		height: calc(100vh - 19vh);
	}

	.star-ask {
		padding: 0 16px;
	}

	.tab {
		border-radius: 3vw;
		background-color: #ebf1f1;
	}
	.ask-ques {
		position: fixed;
		bottom: 15%;
		left: 50%;
		transform: translateX(-50%);
		width: 8rem;
		height: 3rem;
		line-height: 3rem;
		text-align: center;
		color: #fff;
		border-radius: 2rem;
		background: linear-gradient(to right,#60c0b6 20%,#57b79b 70%);
	}
</style>
